import React, { Component } from 'react';
import { Form, Input, Modal, Icon, Button } from 'antd';
import Tips from '../../Tips/index';
import { connect } from 'react-redux';
const FormItem = Form.Item;
let uuid = 0;
class arrange extends Component {
  constructor(props) {
    super(props);
    this.state = {
      argnum: [],
      message: ''
    };
  }
  tips = str => {
    this.setState({
      message: str
    });
    setTimeout(() => {
      this.setState({
        message: ''
      });
    }, 1000);
  }
  remove = k => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one passenger
    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k)
    });
  }

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(uuid);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys
    });
  }
  cancel = () => {
    const { form } = this.props;
    uuid = 0;
    form.setFieldsValue({
      keys: []
    });
    this.props.onCancel();
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        let valuearr = '';
        let namesarr = [];
        if (values.names) {
          namesarr = values.names.filter((e, i) => {
            if (e) {
              valuearr += e + ',';
              if (values.values[i]) {
                valuearr += values.values[i] + ',';
              } else {
                valuearr += 0 + ',';
              }
            }
            return e;
          });
        }
        this.props.onCreate(valuearr);
        console.log(valuearr);
      } else {
        this.tips('请填写完整数据');
      }
    });
  }
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      }
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 5 }
      }
    };
    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
      return (
        <FormItem
          className="initinputargsForm"
          {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
          label={index === 0 ? '参数' : ''}
          required={false}
          key={k}
        >
          {getFieldDecorator(`names[${k}]`, {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [
              {
                required: true,
                whitespace: true,
                message: '请输入数据'
              }
            ]
          })(
            <div>
              <Input className="initinputargs" placeholder="请输入数据" style={{ width: '84%', marginRight: 3 }} />
            </div>
          )}
          {getFieldDecorator(`values[${k}]`, {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [
              {
                required: true,
                whitespace: true,
                message: '请输入数据'
              }
            ]
          })(
            <div>
              <Input placeholder="请输入数据" className="initinputargs" style={{ width: '84%', marginRight: 3 }} />
              <Icon
                className="dynamic-delete-button"
                type="minus-circle-o"
                disabled={keys.length === 1}
                onClick={() => this.remove(k)}
              />
            </div>
          )}
        </FormItem>
      );
    });
    return (
      <div>
        <Modal
          visible={this.props.visible}
          title="部署Chaincode"
          closable={false}
          onCancel={this.cancel}
          okText="部署"
          cancelText="取消"
          onOk={this.handleSubmit}
          confirmLoading={this.props.arrangeLoading}
          destroyOnClose={true}
        >
          <Form>
            {formItems}
            <FormItem {...formItemLayoutWithOutLabel}>
              <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                <Icon type="plus" /> 添加参数
              </Button>
            </FormItem>
            <FormItem {...formItemLayoutWithOutLabel} />
          </Form>
        </Modal>
        <Tips message={this.state.message} />
      </div>
    );
  }
}
const Arrange = Form.create()(arrange);
export default connect(state => {
  return { ...state };
})(Arrange);
